<template>
  <div id="user_order">
    <el-table
      :data="orderList"
      border
      style="width: 70%"
      max-height="500px"
      :header-cell-style="{ background: '#DBE9B2', color: '#606266' }"
    >
      <el-table-column
        min-width="125px"
        align="center"
        header-align="center"
        sortable
        prop="orderuuid"
        label="订单编号"
      >
      </el-table-column>
      <!-- <el-table-column
        align="center"
        header-align="center"
        sortable
        min-width="125px"
        prop="orderid"
        label="订单ID"
      >
      </el-table-column> -->

      <el-table-column
        min-width="125px"
        sortable
        align="center"
        header-align="center"
        prop="fkshopshopid"
        label="商品编号"
      >
      </el-table-column>
      <el-table-column
        min-width="125px"
        sortable
        align="center"
        header-align="center"
        prop="shopname"
        label="商品名称"
      >
      </el-table-column>
      <el-table-column
        min-width="125px"
        sortable
        align="center"
        header-align="center"
        prop="price"
        label="商品总价"
      >
      </el-table-column>
      <!-- <el-table-column
        min-width="125px"
        sortable
        align="center"
        header-align="center"
        prop="fkUserUseridOrderOrderId"
        label="下单用户ID"
      >
      </el-table-column> -->
      <el-table-column
        min-width="135px"
        sortable
        align="center"
        header-align="center"
        prop="username"
        label="收货人姓名"
      >
      </el-table-column>

      <el-table-column
        min-width="135px"
        sortable
        align="center"
        header-align="center"
        prop="sex"
        label="收货人性别"
      >
        <!-- <template slot-scope="scope">
          <span v-if="scope.row.sex === 0">女</span>
          <span v-if="scope.row.sex === 1">男</span>
          <span v-if="scope.row.sex === 2">性别不明</span>
        </template> -->
      </el-table-column>

      <el-table-column
        min-width="125px"
        sortable
        align="center"
        header-align="center"
        prop="address"
        label="收货地址"
      >
      </el-table-column>
      <el-table-column
        min-width="125px"
        align="center"
        header-align="center"
        prop="phone"
        label="联系电话"
      >
      </el-table-column>
      <el-table-column
        min-width="125px"
        sortable
        align="center"
        header-align="center"
        prop="paymethod"
        label="付款方式"
      >
      </el-table-column>
      <!-- <el-table-column
        :formatter="dataFormat"
        min-width="160"
        sortable
        align="center"
        header-align="center"
        prop="downordertime"
        label="下单时间"
      >
      </el-table-column> -->
      <el-table-column
        min-width="125px"
        sortable
        align="center"
        header-align="center"
        prop="deliverystatus"
        label="订单状态"
      >
        <template slot-scope="scope">
          <el-tag type="warning" v-if="scope.row.deliverystatus === 0"
            >未发货</el-tag
          >
          <el-tag type="success" v-if="scope.row.deliverystatus === 1"
            >已发货</el-tag
          >
          <el-tag type="danger" v-if="scope.row.deliverystatus === 2"
            >退货</el-tag
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "UserOrder",
  props: ["orderList"],
  methods: {
    //格式化表格时间日期的函数,这里是去除 T
    dataFormat(row, column) {
      //得到这个带有T的时间数据
      let time = row[column.property].split("T");
      return time[0] + " " + time[1];
    },
  },
};
</script>

<style>
</style>